<template>
    <div>
        <div>
            <el-descriptions title="新增线下客户" direction="vertical" :column="2" border style="margin-top: 20px">
                <el-descriptions-item label="线下客户名称">
                    <el-input v-model="data.name" placeholder="请输入内容" />
                </el-descriptions-item>
                <el-descriptions-item label="客户手机">
                    <el-input :prefix-icon="Iphone" maxlength="11" v-model="data.phone1" placeholder="请输入内容" />
                </el-descriptions-item>
                <el-descriptions-item label="客户电话">
                    <el-input v-model="data.phone2" maxlength="11" placeholder="请输入内容" />
                </el-descriptions-item>
                <el-descriptions-item label="客户来源">
                    <el-select v-model="data.source" clearable placeholder="请选择来源">
                        <el-option v-for="item in date.customerSource" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="电子邮箱">
                    <el-input :prefix-icon="Message" v-model="data.email" placeholder="请输入内容" />
                </el-descriptions-item>
                <el-descriptions-item label="客户级别">
                    <el-select v-model="data.level" clearable placeholder="请选择客户级别">
                        <el-option v-for="item in date.customerLevel" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="地址">
                    <el-cascader v-model="selectOptions" @change="methods.chage" :options="optionsnative_place"
                        placeholder="请选择地址" />
                    <el-input v-model="data.address" :rows="2" type="textarea" autosize placeholder="请输入详细地址" />
                </el-descriptions-item>
                <el-descriptions-item label="客户行业">
                    <el-select v-model="data.industry" clearable placeholder="请选择行业">
                        <el-option v-for="item in date.customerIndustry" :key="item.id" :label="item.value"
                            :value="item.id" />
                    </el-select>
                </el-descriptions-item>
                <el-descriptions-item label="备注">
                    <el-input v-model="data.markUp" :rows="2" type="textarea" autosize placeholder="请输入备注" />
                </el-descriptions-item>
                <el-descriptions-item label="下次联系时间">
                    <el-date-picker v-model="data.nextConnectionTime" value-format="YYYY-MM-DD" type="datetime"
                        placeholder="选择日期" />
                </el-descriptions-item>
                <el-descriptions-item label="操作" :span="2">
                    <el-button type="primary" @click="methods.add">新增</el-button>
                </el-descriptions-item>
            </el-descriptions>
        </div>
    </div>
</template>

<script setup lang="ts">
import { Iphone, Message } from '@element-plus/icons-vue';
import { ref, onMounted, defineProps } from "vue";
import { ElMessage } from 'element-plus'
import { switchOfflineCustomers } from '@/api/Clue/index';
import { getCustomerIndustry, getCustomerLevel, getCustomerSource } from '@/api/Dictionarys/index';
import { reactive, defineEmits } from "vue";
// 级联地址
import {
    provinceAndCityData,
    regionData,
    pcTextArr,
    pcaTextArr,
    codeToText
} from 'element-china-area-data'

const optionsnative_place = pcaTextArr
const props = defineProps({
    data: {
        type: Object,
        default: () => ({}),
        required: true,
    },
});
const datar = reactive({
    key: "",
    isFent: true,
    outerVisible: false,
    rowData: [],
    text: "",
});
const data = reactive({
    id: "",
    name: "",
    phone1: "",
    phone2: "",
    source: "",
    email: "",
    level: "",
    industry: "",
    province: "",
    city: "",
    county: "",
    address: "",
    markUp: "",
    nextConnectionTime: "",
});
//来源
interface CustomerSource {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
//客户行业
interface CustomerIndustry {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
//客户级别
interface CustomerLevel {
    id: string;
    value: string;
    dictionaryTypeId: string;
    createTime: string;
}
interface Date {
    customerSource: CustomerSource[];
    customerLevel: CustomerLevel[];
    customerIndustry: CustomerIndustry[];
}
const date = reactive<Date>({
    customerSource: [],
    customerLevel: [],
    customerIndustry: [],
});
let selectOptions: any[] = [];
const emit = defineEmits(['myclose']);
const methods = {
    async bind() {
        const res = await getCustomerSource();
        if (res.code === 0) {
            date.customerSource = res.data.data;
        }
    },
    async binder() {
        const res = await getCustomerIndustry();
        if (res.code === 0) {
            date.customerIndustry = res.data.data;
        }
    },
    async bindes() {
        const res = await getCustomerLevel();
        if (res.code === 0) {
            date.customerLevel = res.data.data;
        }
    },
    chage() {
        data.province = selectOptions[0];
        data.city = selectOptions[1];
        data.county = selectOptions[2];
    },
    addties() {
        datar.outerVisible = true;
    },
    myclose() {
        datar.outerVisible = false;
    },
    async add() {
        if (data.name.trim() === "") {
            ElMessage.error('线下客户名称不允许为空')
            return;
        }
        if (data.phone1.trim() === "") {
            ElMessage.error('线下客户手机号码不允许为空')
            return;
        }
        if (data.phone2.trim() === "") {
            ElMessage.error('线下客户电话不允许为空')
            return;
        }
        if (data.email.trim() === "") {
            ElMessage.error('电子邮箱不允许为空')
            return;
        }
        if (data.industry.trim() === "") {
            ElMessage.error('客户行业不允许为空')
            return;
        }
        if (data.level.trim() === "") {
            ElMessage.error('客户级别不允许为空')
            return;
        }
        if (data.nextConnectionTime.trim() === "") {
            ElMessage.error('下次联系时间不允许为空')
            return;
        }
        if (data.province.trim() === "") {
            ElMessage.error('地址不允许为空')
            return;
        }
        if (data.city.trim() === "") {
            ElMessage.error('地址不允许为空')
            return;
        }
        if (data.county.trim() === "") {
            ElMessage.error('地址不允许为空')
            return;
        }
        const res = await switchOfflineCustomers({
            ...data,
        });
        if (res.code === 0) {
            ElMessage.success(res.message);
            emit('myclose');
        } else {
            ElMessage.error(res.message);
        }
    }
};
onMounted(() => {
    // data.id = route.params.id;
    methods.bind();
    methods.binder();
    methods.bindes();
    data.name = props.data.name;
    data.phone1 = props.data.phone1;
    data.phone2 = props.data.phone2;
    data.source = props.data.source;
    data.email = props.data.email;
    data.level = props.data.level;
    data.industry = props.data.industry;
    data.markUp = props.data.markUp;
    data.nextConnectionTime = props.data.nextConnectionTime;
    data.address = props.data.address;
    data.province = props.data.province;
    data.city = props.data.city;
    data.county = props.data.county;
    data.id = props.data.id;
    selectOptions[0] = data.province;
    selectOptions[1] = data.city;
    selectOptions[2] = data.county;
    // console.log(route.params.id)

})
</script>

<style scoped></style>